<template>
  <div class="Stock">
    <el-row>
      <el-col :span="24" class="TextAlignL">
        <h2 style="color: #666;">送货通知单</h2>
      </el-col>
      <el-col :span="24">
        <el-form ref="conditionForm" :model="conditionForm" label-position="left" label-width="100px">
          <el-row :gutter="20" type="flex" class="row-bg">
            <el-col :span="6">
              <el-form-item label="通知单号">
                <el-input v-model="conditionForm.fcode" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="物料代码">
                <el-input v-model="conditionForm.FNumber" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="物料名称">
                <el-input v-model="conditionForm.FName" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="采购订单号">
                <el-input v-model="conditionForm.FBillNo" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="" style="margin-top: 7px;">
              <el-button size="mini" type="primary" @click="search" icon="el-icon-search">查询</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24" style="width: 100%;height: 4px; border-bottom: 1px dashed #ccc;">
      </el-col>
      <el-col :span="24" style="width: 100%;height: 4px; margin: 20px  0 ">
        <el-row>
          <el-col :span="2">
            <el-button type="primary" @click="handleAdd" size="mini" icon="el-icon-plus">新增</el-button>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="24" class="MarginT_20">
        <el-table id="out-table"
                  :data="dataList"
                  v-loading="listLoading"
                  style="width: 100%">
          <el-table-column
            type="index"
            fixed="left"
            width="50">
          </el-table-column>
          <el-table-column
            property="fcode"
            label="通知单号"
            width="150"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="ftime"
            label="送货日期"
            width="150"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="flogistics"
            label="物流公司"
            width="150"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="fpo"
            label="快递单号"
            width="150"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="fnote"
            label="备注"
            width="150"
            show-overflow-tooltip>
          </el-table-column>
<!--          <el-table-column-->
<!--            property="freceiver"-->
<!--            label="收货人"-->
<!--            width="150"-->
<!--            show-overflow-tooltip>-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            property="fphone"-->
<!--            label="联系电话"-->
<!--            width="150"-->
<!--            show-overflow-tooltip>-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            property="faddress"-->
<!--            label="收货地址"-->
<!--            width="150"-->
<!--            show-overflow-tooltip>-->
<!--          </el-table-column>-->
          <el-table-column
            property="FNumber"
            label="物料代码"
            width="150"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FName"
            label="物料名称"
            width="150"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FModel"
            width="150"
            show-overflow-tooltip
            label="规格">
          </el-table-column>
          <el-table-column
            property="funit"
            label="单位"
            width="100"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="fqty"
            label="送货数量"
            width="100"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FBillNo"
            label="采购订单号"
            width="100"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FEntrySelfP0275"
            label="采购特殊要求"
            width="120"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            width="300">
            <template slot-scope="scope">
              <el-button type="danger" @click="handleDel(scope.row.fid)" size="mini" icon="el-icon-delete">删除</el-button>
              <el-button type="primary" @click="handlePrint(scope.row.fid)" size="mini" icon="el-icon-printer">打印</el-button>
              <el-button type="primary" @click="handleExportXls('送货通知单', scope.row.fid)" size="mini" icon="el-icon-download">导出</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24" class="TextAlignR MarginT_20" v-if="dataList.length > 0">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="curPage"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="sum">
        </el-pagination>
      </el-col>
    </el-row>
    <DeliveryNoticeFormModal ref="DeliverNoticeModal" @modalOk="modalOk"></DeliveryNoticeFormModal>
    <!--打印-->
    <delivery-notice-print-modal ref="shPrintModal"></delivery-notice-print-modal>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getQueryParams } from '../util/utils'
import DeliveryNoticeFormModal from '../components/DeliveryNoticeFormModal'
import DeliveryNoticePrintModal from '../components/DeliveryNoticePrintModal'

export default {
  name: 'DeliveryNotice',
  data () {
    return {
      listLoading: false,
      dataList: [],
      conditionForm: {
        fcode: '',
        FNumber: '',
        FName: '',
        FBillNo: ''
      },
      curPage: 1,
      sum: 0,
      curRow: null
    }
  },
  computed: {
    ...mapState({
      fsupplierid: state => state.fsupplierid
    })
  },
  components: {
    DeliveryNoticePrintModal,
    DeliveryNoticeFormModal
  },
  created () {
    this.search()
  },
  methods: {
    handleExportXls (fileName, id) {
      if (!fileName || typeof fileName !== 'string') {
        fileName = '导出文件'
      }
      let formatData = getQueryParams({ id }, {})
      this.Http.downFile('/yw_supplier_user/ywSupplierUser/exportDelivery', formatData).then(res => {
        console.log(res)
        if (!res.data) {
          this.$message.warning('文件下载失败')
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([res.data], {type: 'application/vnd.ms-excel'}), fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([res.data], {type: 'application/vnd.ms-excel'}))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
          window.URL.revokeObjectURL(url)
        }
      })
    },
    handleAdd () {
      this.$refs.DeliverNoticeModal.show()
    },
    handleDel (fid) {
      this.$confirm('此操作将永久删除该单据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.Http.delete('/yw_supplier_user/ywSupplierUser/delDelivery?fid=' + fid).then(res => {
          if (res.data.success) {
            this.$message.success('删除成功！')
            this.search()
          } else {
            this.$message.error(res.data.message)
          }
        }).catch((error) => {
          console.log(error)
          this.listLoading = false
        })
      }).catch(() => {
      })
    },
    handlePrint (id) {
      this.$refs.shPrintModal.show(id)
    },
    modalOk () {
      this.search()
    },
    search () {
      this.curPage = 1
      this.getStockList()
    },
    handleCurrentChange () {
      this.getStockList()
    },
    getStockList () {
      this.listLoading = true
      let formatData = getQueryParams({...this.conditionForm, ...{fsupplierid: this.fsupplierid}}, {current: this.curPage, pageSize: 10})
      this.Http.get('/yw_supplier_user/ywSupplierUser/deliveryList', formatData
      ).then(res => {
        if (res.data.success) {
          this.dataList = res.data.result.records
          this.sum = res.data.result.total
          this.listLoading = false
        }
      }).catch((error) => {
        console.log(error)
        this.listLoading = false
      })
    }
  }
}
</script>

<style lang="less"  scoped>
  @Padding: 24px;
  .Stock{
    width: calc(100% - 2*@Padding);
    background: #fff;
    padding: 0 @Padding @Padding @Padding;
    margin-top: @Padding;
  }
</style>
